<template>
    <div>
        <Header v-if="showHeader" title="下属员工"></Header>
        <div ref="topWarp" class="top-warp">
            <SearchData :isDisabled="isDisabled" :organizationTree="organizationTree" @organizationNavs="organizationNavs" @searchData="searchData"></SearchData>
            <SortData :sortToolsList="sortToolsList" @sortTable="sortTable"></SortData>
        </div>
        <!--滑动区域 ref='mescroll'不能删, 目的是路由切换时可通过ref调用mescroll-vue组件的beforeRouteEnter方法-->
        <mescroll-vue ref="tableListMescroll" :up="mescrollUp" @init="mescrollInit">
            <div id="tableList">
                <TableList :tableList="tableList" fromPage='subordinates'></TableList>
            </div>
        </mescroll-vue>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
import Header from "@/components/Header.vue";
import Loading from "@/components/Loading.vue";
import SearchData from "@/components/business/SearchData.vue";
import SortData from "@/components/SortData.vue"
import TableList from "@/components/business/TableList.vue";
import { staffers,organizations } from "@/request/api.js";
import { deepCopy } from "@/plugins/deepCopy.js";
export default {
    name:'Subordinates',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            showLoading:false,
            searchValue:'',
            order:'assessment_order_num',
            order_type:'desc',
            organize_id:'0',
            isDisabled:true,
            organizationTree:[],
            sortToolsList:[
                {text:'当前考核',isSort:false,order:'',orderSort:false},
                {text:'截止日期',isSort:true,order:'end_time',orderSort:false},
                {text:'考核期招单数',isSort:true,order:'assessment_order_num',orderSort:false},
                {text:'考核得分',isSort:true,order:'assessment_total_score',orderSort:false},
            ],
            mescroll: null,
            tableList:[],
            mescrollUp: {
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    limit: 10 // 每页数据的数量
                },
                noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                empty: {
                    // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
                    warpId: 'tableList', // 父布局的id;
                    tip: '没有更多了~', // 提示
                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            },
        }
    },
    components:{
        MescrollVue,
        Header,
        Loading,
        SearchData,
        SortData,
        TableList,
    },
    created(){
         organizations({token:this.$store.state.token}).then(res=>{
            // console.log(res);
            let data = res.data.tree;
            // console.log(data)
            this.organizationTree = deepCopy(data);
            this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/name/g, 'label'));
            this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/id/g, 'value'));
            // console.log(this.organizationTree)
            this.isDisabled = false;
        }).catch(error=>{
            console.log(error)
        })
    },
    mounted(){
        if (this.showHeader) {
            this.$refs.topWarp.style.top = 44 + 'px'
            this.$refs.tableListMescroll.$el.style.top = 132 + 'px'
        }
    },
    methods:{
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback (page,mescroll) {
            // console.log('pages'+page.num)
            // 联网加载数据
            staffers({
                token:this.$store.state.token,
                fd_sta_name: this.searchValue,
                order:this.order,
                order_type:this.order_type,
                organize_id:this.organize_id,
                page:page.num,
                page_num:page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                if (page.num==1) {
                    this.tableList = list.data;
                } else {
                    this.tableList = this.tableList.concat(list.data);
                }
                
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    mescroll.endSuccess(list.data.length)
                })
            }).catch(error=>{
                console.log(error);
                mescroll.endErr()
            })
        },
        //排序
        sortTable(data){
            this.showLoading = true;
            this.mescrollUp.page.num = 1;
            // console.log(data)
            this.order = data.order;
            this.order_type = data.order_type;
            staffers({
                token:this.$store.state.token,
                fd_sta_name: this.searchValue,
                order:this.order,
                order_type:this.order_type,
                organize_id:this.organize_id,
                page:this.mescrollUp.page.num,
                page_num:this.mescrollUp.page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.data;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //组织过滤
        organizationNavs(data){
            this.showLoading = true;
            // console.log('筛选');
            // console.log(data);
            data.value?this.organize_id = data.value:this.organize_id = '0';
            // if (data.length) {
            //     this.organize_id = data[[data.length-1]].value;
            // }else{
            //     this.organize_id = '0'
            // }
            this.mescrollUp.page.num = 1;
            staffers({
                token:this.$store.state.token,
                fd_sta_name: this.searchValue,
                order:this.order,
                order_type:this.order_type,
                organize_id:this.organize_id,
                page:this.mescrollUp.page.num,
                page_num:this.mescrollUp.page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.data;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //搜索关键字
        searchData(val){
            this.showLoading = true;
            this.searchValue = val;
            this.mescrollUp.page.num = 1;
            staffers({
                token:this.$store.state.token,
                fd_sta_name: this.searchValue,
                order:this.order,
                order_type:this.order_type,
                organize_id:this.organize_id,
                page:this.mescrollUp.page.num,
                page_num:this.mescrollUp.page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                this.tableList = list.data;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.showLoading = false;
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        }
    }
}
</script>
<style lang="less" scoped>
.top-warp{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}
/*以fixed的方式固定mescroll的高度*/
  .mescroll {
    position: fixed;
    top: 88px;
    bottom: 0;
    height: auto;
  }
</style>